<template>
  <div v-loading="loading1" style="background:#ffffff;width: 100%;;max-height:100%;overflow: auto;padding:30px;margin:0px;font-size:12px;margin-bottom:10px;" >
      <el-row >
          <el-col :span="24" style="border:0px;">
              <div class="grid-content"  >
                  <div style="text-align:center;margin:auto;font-size:30px;">2#轴系(含齿轮箱、艉管、主机遥控、CPP液压泵站）</div>
              </div>
          </el-col>
      </el-row>

      <el-col :span="24" style="position: relative;text-align:center;align-items:center;align-content:center;justify-content: center;  height:350px;margin-top:20px;">
            <img :src="url" style="width:80%;height: 50%;margin-bottom:20px;">
            <div style="height:30%;width:30%;position:absolute;top:-20px;left:15%">
              <temperature-chart :barTitle="bar.title" :isLabelFormat="true"  :height="'200px'" :x-data="bar.xDatas" :y-data="bar.yDatas" :unit="bar.unit" :isRotate="isRotate"   />
         </div>
    </el-col>
      
      <el-row :gutter="24" type="flex" justify="space-around" >
          <el-col :span="8" style="padding:20px;border:1px solid black;" >
              <div style="">
                  <h1 style="text-align:center; padding:10px ; align-content:center">2#齿轮箱、艉管、CPP液压泵站模拟量</h1>
              
                  <div  v-for="(item,index) in data.one" :key="index" style="padding:5px;display:flex;text-align:end;align-items:end;margin-top:1px;margin-left:5px">
                      <div :style="{'width':'50%',color:getColorName(item)}">{{item.deviceName}}</div>
                      <div style="width:60%;padding:1px;display:flex;text-align:center;align-items:center;">
                          <div style="width:60%;height:20px;border: 1px solid black;align-content:center">{{item.remark}}</div>
                          <div style="margin-left:5px" > {{item.unit}}</div>
                      </div>
                  </div>
              </div>

          
             
            
          </el-col>
          <el-col :span="14" style="border:1px solid black;padding:20px;">
              <h1 style="text-align:center; padding:10px ; align-content:center;">2#齿轮箱、艉管、主机遥控、CPP液压泵站开关量</h1>
              
              <div style="display:grid; grid-template-columns: repeat(2, 1fr);">
               
                  <div  v-for="(item,index) in data.two" :key="index" style="padding:5px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:20px">
                          <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                          <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                  </div>
                 
              </div>
          </el-col>
         
      </el-row>
      
  </div>
</template>
<script>
import {listDevs} from  "@/api/system/device";
import { histogramData } from "@/api/system/chartConfig";
import TemperatureChart from './components/TemperatureChart.vue';
import { mapState } from "vuex";
export default {
name: "emergencyBoard",
components:{
TemperatureChart
},
async created() {

// let res= await this.getConfigKey("sys.server.version")
//  this.version =res.msg||this.version;
//  try{
  this.url=require('@/assets/images/rightAxis.png')
//  }catch(e){
//   // this.url='url(' +require('@/assets/images/5000_measure2.jpg')+')'
//  }

  if(!this.timer){
  this.timer = setInterval(() => {
      this.init()
      this.getData();
  }, 3000);//3秒刷新次
}else{
  this.init()
}
},
computed: {
...mapState("app", {   // 对象形式
    alarmList: "alarmList",
    lightSwitch:"lightSwitch",
    extExpSwitch:"extExpSwitch"
})
},
beforeDestroy() {

if(this.timer){
    clearInterval(this.timer);
    this.timer=null;
  }
},
methods:{

  getFlash(row){
      //2、报警消息时，闪烁
      let f = this.alarmList.some(alarm=>
          alarm ==row.deviceId
      );
      if(f){
        if(row.displayAlarm=="2"){//告警
          return true;
        }
      }
      if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
      {//1、试灯打开
        // console.log("extExpSwitch=="+this.extExpSwitch)
        if(row.displayAlarm=="2"){//告警
          return true;
        }
      }
        return false;
    },
     
    getColorName(row){
      //告警消息
      if("2"== row.displayAlarm){
          let f = this.alarmList.some(alarm=>
          alarm ==row.deviceId
          );
          if(f){
              return 'red';
          }
          //3、显示设备状态颜色
          if(row.warnStatus=='1'||row.warnStatus=='0'){
              return 'black';
          }
          return 'red'
      }
      return "black";
      
    },
    getColor(row){
      if("2"== row.displayAlarm){  //告警类型
        //告警消息
        let f = this.alarmList.some(alarm=>
          alarm ==row.deviceId
        );
        if(f){//2、有报警通知，则显示灯的颜色
          return row.lightColor;
        }
      }
      if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
          console.log("extExpSwitch=="+this.extExpSwitch)
          return row.lightColor;
      }
      //3、显示设备状态颜色
      if(row.warnStatus=='1'||row.warnStatus=='0'){
        return 'grey';
      }
        return row.lightColor;
    },
    async   getData(){
  // console.log(111)
  await  histogramData({deviceGraphicalId:this.currentId}).then( async (response) =>
    {
    this.bar.data =  await response.data;
    // console.log(this.bar.data.data.data)
    let dataList  = this.bar.data.data
    this.bar.xDatas=   dataList.map(item=> {return item.deviceName});
    // console.log(this.bar.xDatas)
    this.bar.yDatas=   [{
            type:'bar',
            barWidth:'20',
            data: dataList.map(item=> {return item.value}),
            // itemStyle:{
            //   normal: {
            //       color: function (params) { //根据数值大小设置相关颜色
            //           if (params.value > 0) {
            //               return 'green'
            //           } else {
            //               return 'red'
            //           }
            //       }
            //   }}
        }]

  })
  },
  init(){
      listDevs({"deptIds":this.depCode}).then(response=>{
        this.loading1=false
          console.log(response)
          let dataArr = response.data;
          if(dataArr){
              // console.log(dataArr)
              this.data.one= dataArr.filter(item=>{
                  return   item.systemId.startsWith("10M") && item.deviceName.trim().startsWith("2#")
                  }).sort((a,b)=> {
                  return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
                  // this.data.one=this.data.one.slice(0,7)
              // console.log("one==", this.data.one)

              
              this.data.two= dataArr.filter(item=>{
                return   item.systemId.startsWith("10K") && (item.deviceName.trim().startsWith("2#") )&&
               ( (item.systemId.split("-")[1] >=116 && item.systemId.split("-")[1] <=155 ))
              }).sort((a,b)=> {
              return a.systemId.split("-")[1]-b.systemId.split("-")[1]}) 
              console.log("two==", this.data.two)

                  // this.data.three=this.data.three.slice(0,10)

              
              // console.log("three1==", this.data.three1)
             
          }
          
      })
  },

 
},
data(){
 return{
  isRotate:true,
  loading1:true,
  currentId:this.$route.query.graphId,
  url:"",
  loading :false,
  total: 0,
  data:{
    one:[],
    two:[],
    three:[],
    four:[]
  },
  bar:{
    timer:null,
    title:"2#轴系温度柱状图",
    time:this.$route.query.time,
    // data: datas,
    yDatas:[],
    xDatas:[],
    unit:this.$route.query.unit==1?'Kpa':'°C'
},

timer:null,
deptId:this.$route.query.depCode,
}
}
}
</script>
<style scoped>

.tip {
margin: 2px;
padding: 1px;
color: rgb(52 88 124 / 75%);

border-radius: 20% 0% 40% 0%;
background-color: rgb(122 132 216 / 19%);
position: absolute;float:left;margin: 2px;
}

.el-row {
margin-bottom: 20px;

}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}


.parent {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.child{
flex-basis: 20%;
}
.alarmDiv{
  display:block;
  -webkit-animation-name: imageAnim;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease;
  -webkit-animation-play-state: running;
}
@-webkit-keyframes imageAnim{
  0% {opacity: 1;}
  50% {opacity: 0.5;}
  100% {opacity: 0;}
}
.grid-content {
text-wrap:wrap;
font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
}
.chart-col{
/* padding:10px; */
}

</style>
